<script lang="ts" setup>
import {computed, nextTick, reactive} from 'vue'
import {HoverButton, SvgIcon} from '@/components/common'
import {useAppStore, useChatStore} from '@/store'

interface Props {
	usingContext: boolean
}


interface Emit {
	(ev: 'export'): void

	(ev: 'handleClear'): void

	(ev: 'handleModein'): void

	(ev: 'handleSetting'): void
	(ev: 'handleHistory'): void
}

defineProps<Props>()

const state = reactive({
	currentModeIndex: 1
})
const emit = defineEmits<Emit>()

const appStore = useAppStore()
const chatStore = useChatStore()

const collapsed = computed(() => appStore.siderCollapsed)
const currentChatHistory = computed(() => chatStore.getChatHistoryByCurrentActive)


function handleUpdateCollapsed() {
	appStore.setSiderCollapsed(!collapsed.value)
}

function onScrollToTop() {
	const scrollRef = document.querySelector('#scrollRef')
	if (scrollRef)
		nextTick(() => scrollRef.scrollTop = 0)
}

function handleExport() {
	emit('export')
}

function handleClear() {
	emit('handleClear')
}

//响应父组件handleSetting
function handlesetting() {
	emit('handleSetting')
}

function handlehistory() {
	emit('handleHistory')
}

const icons = ['ri-bilibili-line', 'ri-file-paper-2-line', 'ri-funds-box-line', 'ri-user-2-fill'];

const currentIcon = computed(() => icons[state.currentModeIndex % 4]);

function modein() {
	state.currentModeIndex = state.currentModeIndex + 1;
	emit('handleModein')
}
</script>

<template>
	<header
		class="sticky top-0 left-0 right-0 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/20 backdrop-blur"
	>
		<div class="relative flex items-center justify-between min-w-0 overflow-hidden h-14">
			<div class="flex items-center">
				<button
					class="flex items-center justify-center w-11 h-11"
					@click="handleUpdateCollapsed"
				>
					<SvgIcon v-if="collapsed" class="text-2xl" icon="ri:align-justify"/>
					<SvgIcon v-else class="text-2xl" icon="ri:align-right"/>
				</button>
			</div>
			<h1
				class="flex-1 px-4 pr-6 overflow-hidden cursor-pointer select-none text-ellipsis whitespace-nowrap"
				@dblclick="onScrollToTop"
			>
				{{ currentChatHistory?.title ?? '' }}
			</h1>
			<div class="flex items-center space-x-2">
				<HoverButton @click="handleExport">
          <span class="text-xl text-[#4f555e] dark:text-white">
            <SvgIcon icon="ri:download-2-line"/>
          </span>
				</HoverButton>
				<HoverButton  @click="modein">
            <span class="text-xl text-[#4f555e] dark:text-white">
               <SvgIcon :icon="currentIcon"/>
            </span>
				</HoverButton>
				<HoverButton @click="handleClear">
          <span class="text-xl text-[#4f555e] dark:text-white">
            <SvgIcon icon="ri:delete-bin-line"/>
          </span>
				</HoverButton>
				<HoverButton @click="handlesetting">
          <span class="text-xl text-[#4f555e] dark:text-white">
            <SvgIcon icon="ri-settings-3-line"/>
          </span>
				</HoverButton>
				<HoverButton @click="handlehistory">
            <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
              <SvgIcon icon="ri:chat-history-line"/>
            </span>
				</HoverButton>
			</div>
		</div>
	</header>
</template>
